<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/react.development.js"></script>
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
</head>
<body>
   <div id="app">

   </div> 
</body>
<script type="text/babel">
class OldBrother extends React.Component{
      addCar(item){
        this.props.addCar(item)
      }
       render(){
        let list=this.props.goodsList.map((item,index)=>{
                return  (<li>商品名称：{item.name} 价格:{item.price}<button onClick={e=>this.addCar(item)}>加入购物车</button></li>)
           })
           return (
             <div style={ {border:'solid 5px blue',margin:'10px',height:'200px'} }>
               产品列表
               <ul>{list}</ul>
           </div>
           )
       }
}

class YoungBrother extends React.Component{
    changeCount(goods,n){
        this.props.changeCount(goods,n)
    }
    render(){
         let list=this.props.goodsItems.map((item,index)=>{
             let reduce=""
             if(item.count>1){
             reduce=<button onClick={e=>this.changeCount(item,-1)}>-</button>
             }
             return <li>商品名称：{item.name} 价格:{item.price} 数量:{item.count}<button onClick={e=>this.changeCount(item,1)}>+</button>{reduce}</li>
         })  
        return (
            <div style={{border:'solid 5px green',margin:'10px',height:'200px'}}>
             <ul>{list}</ul>
            </div>
        )  
       }
}

class Father extends React.Component{
    constructor(props) {
            super(props);
            this.state = {
                oldBrother: {
                    goodsList: [
                        {id: '111', name: '手机', price: 5000},
                        {id: '222', name: '鼠标', price: 200},
                        {id: '333', name: '键盘', price: 300},
                        {id: '444', name: '显示器', price: 2000},
                    ]
                },
                youngBrother: {
                    goodsItems: [
                    ]
                }
            }
        }
        addCar(goods){
          var exist=false
          let newgoodsItems=this.state.youngBrother.goodsItems.map((item,index)=>{
              if(item.id===goods.id){
                 exist=true
                 return {id:item.id, name:item.name, price:item.price,count:item.count+1}
              }else{
               return item
              } 
           })
           if(!exist){
            newgoodsItems.push({id:goods.id, name:goods.name, price:goods.price,count:1})
          }
           this.setState({
            youngBrother:{goodsItems:newgoodsItems}
           })
        }
        changeCount(goods,n){
            let newgoodsItems=this.state.youngBrother.goodsItems.map((item,index)=>{
                if(item===goods){
                    return {id:item.id, name:item.name, price:item.price,count:item.count+n}
                }
                else{
                    return item
                }
            })
            this.setState({
            youngBrother:{goodsItems:newgoodsItems}
           })
        }
        render(){
            return(
                <div style={ {border:'solid 5px red',margin:'10px',height:'600px'} }>
                <OldBrother goodsList={this.state.oldBrother.goodsList} addCar={(goods)=>this.addCar(goods)}/>
                <YoungBrother goodsItems={this.state.youngBrother.goodsItems} changeCount={(goods,n)=>this.changeCount(goods,n)}/>
                </div> 
            )
        }
}

ReactDOM.render(<Father/>,document.getElementById("app"))
</script>
</html>